<template>
    <div id="main" class="hander-car">
        <div class="store-content">
            <div class="cart-box">
                <div class="title">
                    <h2>购物清单</h2>
                </div>
                <div class="cart-inner">
                    <div class="empty-label" v-if="!cartList.length">
                        <h3>您的购物车中还没有商品</h3>
                        <router-link to="/" class="link">现在选购</router-link>
                    </div>
                    <div>
                        <div class="cart-table-title" v-if="cartList.length">
                            <span class="name">商品信息</span>
                            <span class="operation">操作</span>
                            <span class="subtotal">小计</span>
                            <span class="num">数量</span>
                            <span class="price">单价</span>
                        </div>
                        <div class="cart-table">
                            <div class="cart-group">
                                <!--购物列表-->
                                <div v-for="(item,index) in cartList" :key="item.stock_id" class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span @click="handleCheck(index)" :class="['blue-checkbox-new',{'checkbox-on':item.ischeck}]"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img :src="item.image">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row" >
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">
                                                    {{item.title}}
                                                </a>
                                                <ul class="attribute">
                                                    <li>{{item.detail.color_name}}</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                            <a class="items-delete-btn" @click="handleDel(index)"></a>
                                        </div>
                                        <div class="subtotal">¥ {{item.num*item.price}}</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span 
                                                    @click="handleNum(index,false)" 
                                                    class="down"
                                                    :class="item.num<=1?'down-disabled':''"
                                                >-</span>
                                                <span class="num">
                                                    <input :value="item.num" disabled type="text" style="display: inline-block;">
                                                </span>
                                                <span 
                                                    @click="handleNum(index)" 
                                                    :class="['up',{'up-disabled':item.num>=item.limit_num}]"
                                                >+</span>
                                                
                                            </div>
                                        </div>
                                        <div class="price">¥ {{item.price}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-bottom-bg fix-bottom" v-if="cartList.length">
                    <div class="cart-bar-operation">
                        <div>
                            <div class="choose-all js-choose-all">
                                <span @click="handleAllCheck" :class="['blue-checkbox-new',{'checkbox-on':allInfo.allCheck}]"><a></a></span>
                                全选
                            </div>
                            <div class="delete-choose-goods" @click="handleDelCheck">删除选中的商品</div>
                        </div>
                    </div>
                    <div class="shipping">
                        <div class="shipping-box">
                            <div class="shipping-total shipping-num">
                                <h4 class="">
                                    已选择 <i>{{allInfo.checkNum}}</i> 件商品
                                </h4>
                                <h5>
                                    共计 <i >{{allInfo.allNum}}</i> 件商品
                                </h5>
                            </div>
                            <div class="shipping-total shipping-price">
                                <h4 class="">
                                    应付总额：<span>￥</span><i >{{allInfo.checkPrice}}</i> 
                                </h4>
                                <h5 class="shipping-tips">
                                    应付总额不含运费
                                </h5>
                            </div>
                        </div>
                        <span 
                            class="jianguo-blue-main-btn big-main-btn js-checkout "
                            :class="allInfo.checkNum==0?'disabled-btn':''"
                        >
                            <router-link to="/checkout">现在结算</router-link>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
       computed: {
           cartList() {
               return this.$store.state.cart.cartList 
           },
           allInfo(){
               return this.$store.getters['cart/allInfo']
           }
       },
       methods: {
           handleCheck(idx) { //单选
               this.$store.commit('cart/cartCheckMut',idx)
           },
           handleAllCheck(){ //全选
               let bool = this.allInfo.allCheck //获取原来的全选状态
               this.$store.commit('cart/cartAllCheckMut',bool)
           },
           handleNum(idx,bool=true){ //数量控制
               this.$store.commit('cart/cartNumMut',{idx,bool})
           },
           handleDel(idx){ //删除
               this.$store.commit('cart/cartDelMut',idx)
           },
           handleDelCheck(){ //删除已选中
                this.$store.commit('cart/cartDelCheckMut')
           }
       },
    }
</script>

<style src="../assets/css/cart.css" scoped></style>